<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格跑马灯</title>
</head>
<style>
    #myDiv{
        width: 150px;
        height: 150px;
        overflow: scroll;
    }
</style>
<script>
    window.onload = function(){
        //任务调度的时间频率delay
        var delay = 500;

        var handler = function(){
            //复制第一行数据
            var tdCopy = document.getElementById("scrollArea").firstElementChild.cloneNode(true);
            //删除第一行数据
            document.getElementById("scrollArea").removeChild(document.getElementById("scrollArea").firstElementChild);
            //将刚刚复制的第一行数据添加到最后一行之中。
            document.getElementById("scrollArea").append(tdCopy);
        }
        //任务调度（定时任务）
        setInterval(handler,delay);
    }
</script>
<body>
    <div id="myDiv">
        <table border="2">
            <thead>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </thead>
            <tbody id="scrollArea">
                <tr>
                    <td>01</td>
                    <td>张方兴1</td>
                    <td>31</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>张方兴2</td>
                    <td>32</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>张方兴3</td>
                    <td>33</td>
                </tr>
                <tr>
                    <td>04</td>
                    <td>张方兴4</td>
                    <td>34</td>
                </tr>
                <tr>
                    <td>05</td>
                    <td>张方兴5</td>
                    <td>35</td>
                </tr>
                <tr>
                    <td>06</td>
                    <td>张方兴6</td>
                    <td>36</td>
                </tr>
                <tr>
                    <td>07</td>
                    <td>张方兴7</td>
                    <td>37</td>
                </tr>
                <tr>
                    <td>08</td>
                    <td>张方兴8</td>
                    <td>38</td>
                </tr>
                <tr>
                    <td>09</td>
                    <td>张方兴9</td>
                    <td>39</td>
                </tr>
            </tbody>

        </table>
    </div>
</body>
</html>